<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>恋尚优饰品交易中心</title>
<link href="../css/main.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="../css/commodity.css">
<link rel="stylesheet" href="../css/demo.css">
<link rel="stylesheet" href="../css/component.css">
<link rel="stylesheet" href="../css/content.css">
<link rel="stylesheet" href="../css/page.css">

</head>
<body>
	<div class="wrap">
		<div class="logo">
			<div class="logo_content">
				<a href=""><img src="../images/dota2_logn.png" alt="恋尚优" /></a>
				<div class="login">
					<c:if test="${not empty userInfo }">
						<div class="user">
							<div class="user_img">
								<img src="../images/user.png" alt="" />
							</div>
							<div class="user_name" onmouseover="$('#user_name_none').css('display', 'block');"
								onmouseout="$('#user_name_none').css('display', 'none');">
								<a href="" id="user_name_a">
									<span>${userInfo. uName}</span> <b class="caret"></b>
								</a>
								<ul id="user_name_none">
									<li class="user_home"><a
										href="../front/userCenter">个人主页</a></li>
									<li class="out_login"><a href="javascript:void(0)"
										id="quit"   onclick="loginOut()">退出登录</a></li>
								</ul>
							</div>
						</div>
					</c:if>
					<c:if test="${ empty userInfo }">
					<!-- start -->
					<div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
						<button type="button" id="login_b" class="login_box">登录</button>
						<div class="morph-content">
							<div>
								<div class="content-style-form content-style-form-1">
									<span class="icon icon-close">×</span>
									<h2>会员登录</h2>
									<form action="" method="post" id="denglu">
										<p>
											<label>用户名：</label><input placeholder="请输入用户名" name="uName"
												id="login_name" type="text"><span></span>
										</p>
										<p>
											<label>密码：</label><input placeholder="请输入登录密码" name="uPwd"
												id="login_pass" value="" type="password"><span></span>
										</p>
										<p>
											<label>验证码：</label><input id="code" placeholder="请输入验证码"
												type="text"> <img src="../front/valiCodeImg/login"
												alt="验证码" id="code_img"
												onclick="this.src='../front/valiCodeImg/login?'+Math.random()"
												style="margin-left: 40px; width: 150px; height: 45px; cursor: pointer;"><span
												id="code_info"
												style="font-size: 15px; margin-left: 20px; color: red"></span>
										</p>
										<p>
											<input value="登录" id="login_t" class="login_btn"
												type="button">
										</p>
										<div>
											<a href="">忘记密码?</a>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
					<div
						class="morph-button morph-button-modal morph-button-modal-3 morph-button-fixed">
						<button type="button" id="login_b" class="register">注册</button>
						<div class="morph-content">
							<div>
								<div class="content-style-form content-style-form-2">
									<span class="icon icon-close">×</span>
									<h2>会员注册</h2>
									<form id="zuce">
										<p>
											<label class="p1">用户名：</label> <input placeholder="请输入用户名"
												class="reg reg_name" name="uName" type="text"> <span>*请输入5到20位字符的账户</span>
										</p>

										<p>
											<label class="p1">密码：</label> <input placeholder="请输入密码"
												class="reg reg_pwd" name="uPwd" type="password"> <span>*请输入7到20位字符的密码，必须包含数字、字母</span>
										</p>
										<p>
											<label class="p1">确认密码：</label> <input placeholder="确认密码"
												class="reg reg_reUpwd" name="reuPwd" type="password">
											<span>*请输入7到20位字符的密码，必须包含数字、字母</span>
										</p>
										<p>
											<label class="p1">邮箱：</label> <input placeholder="请输入邮箱"
												class="reg reg_email" name="uEmail" type="text"> <span>*请输入正确的邮箱</span>
										</p>

										<p>
											<label class="p1">手机号码：</label> <input placeholder="请输入手机号码"
												class="reg reg_phone" name="uPhone" type="text"> <span>*请输入正确的手机号码以保证找回密码</span>
										</p>
										<p>
											<label class="p1">验证码：</label> <input id="code"
												placeholder="请输入验证码" style="width: 180px" class="reg"
												name="code" type="text"> <img
												src="../front/valiCodeImg/register" alt="验证码"
												style="margin-left: 25px; cursor: pointer;"
												onclick="this.src='../front/valiCodeImg/register?'+Math.random()"
												id="reg_img"> <span class="reg_code"
												style="line-height: 45px"></span>
										</p>
										<p>
											<input value="提交注册" id="login_t" class="zuce_btn"
												type="button">
										</p>
									</form>
								</div>
							</div>
						</div>
					</div>
					</c:if>
				</div>
			</div>
		</div>
		<!--身体-->
		<div class="bodyer">
			<div class="container">
				<!--具体内容-->
				<div class="sort">
					<div class="sort-left">
						<!--分类-->
						<div class="mall-top-shadow">
							<!--左边-->
							<div class="sort_title">商品分类</div>
							<c:if test="${not empty classTree[0]}">
								<div class="strength suspension">
									<div class="note">${classTree[0].text }</div>
									<input class="classId" type="hidden"
										value="${classTree[0].id }">
									<div class="note_1">${classTree[0].cCreateTime }</div>
									<div class="icon_1">
										<img src="../images/btn-icon.png" alt="" />
									</div>

								</div>
							</c:if>
							<c:if test="${not empty classTree[1]}">
								<div class="strength suspension">
									<div class="note">${classTree[1].text }</div>
									<input class="classId" type="hidden"
										value="${classTree[1].id }">
									<div class="note_1">${classTree[1].cCreateTime }</div>
									<div class="icon_1">
										<img src="../images/btn-icon.png" alt="" />
									</div>

								</div>
							</c:if>
							<c:if test="${not empty classTree[2]}">
								<div class="alacrity suspension">
									<div class="note">${classTree[2].text }</div>
									<input class="classId" type="hidden"
										value="${classTree[2].id }">
									<div class="note_1">${classTree[2].cCreateTime }</div>
									<div class="icon_1">
										<img src="../images/btn-icon.png" alt="" />
									</div>

								</div>
							</c:if>
							<c:if test="${not empty classTree[3]}">
								<div class="alacrity suspension">
									<div class="note">${classTree[3].text }</div>
									<input class="classId" type="hidden"
										value="${classTree[3].id }">
									<div class="note_1">${classTree[3].cCreateTime }</div>
									<div class="icon_1">
										<img src="../images/btn-icon.png" alt="" />
									</div>

								</div>
							</c:if>
							<c:if test="${not empty classTree[4]}">
								<div class="intelligence suspension">
									<div class="note">${classTree[4].text }</div>
									<input class="classId" type="hidden"
										value="${classTree[4].id }">
									<div class="note_1">${classTree[4].cCreateTime }</div>
									<div class="icon_1">
										<img src="../images/btn-icon.png" alt="" />
									</div>

								</div>
							</c:if>
							<c:if test="${not empty classTree[5]}">
								<div class="rarity suspension">
									<div class="note">${classTree[5].text }</div>
									<input class="classId" type="hidden"
										value="${classTree[5].id }">
									<div class="note_1">${classTree[5].cCreateTime }</div>
									<div class="icon_1">
										<img src="../images/btn-icon.png" alt="" />
									</div>

								</div>
							</c:if>
							<c:if test="${not empty classTree[6]}">
								<div class="rarity suspension">
									<div class="note">${classTree[6].text }</div>
									<input class="classId" type="hidden"
										value="${classTree[6].id }">
									<div class="note_1">${classTree[6].cCreateTime }</div>
									<div class="icon_1">
										<img src="../images/btn-icon.png" alt="" />
									</div>

								</div>
							</c:if>
							<c:if test="${not empty classTree[7]}">
								<div class="type suspension">
									<div class="note">${classTree[7].text }</div>
									<input class="classId" type="hidden"
										value="${classTree[7].id }">
									<div class="note_1">${classTree[7].cCreateTime }</div>
									<div class="icon_1">
										<img src="../images/btn-icon.png" alt="" />
									</div>

								</div>
							</c:if>
							<c:if test="${not empty classTree[8]}">
								<div class="type suspension">
									<div class="note">${classTree[8].text }</div>
									<input class="classId" type="hidden"
										value="${classTree[8].id }">
									<div class="note_1">${classTree[8].cCreateTime }</div>
									<div class="icon_1">
										<img src="../images/btn-icon.png" alt="" />
									</div>

								</div>
							</c:if>
							<c:if test="${not empty classTree[9]}">
								<div class="intelligence suspension">
									<div class="note">${classTree[9].text }</div>
									<input class="classId" type="hidden"
										value="${classTree[9].id }">
									<div class="note_1">${classTree[9].cCreateTime }</div>
									<div class="icon_1">
										<img src="../images/btn-icon.png" alt="" />
									</div>

								</div>
							</c:if>
						</div>
						<div class="search">
							<!--搜索-->
							<div class="mall-top-title">
								<div class="search_input">
									<form id="searchForm" action="../front/search" method="get">
										<input type="text" id="search_input" placeholder="点击搜索"
											name="search" /> <a href="javascript:void(0);"
											onclick="submitSearch()"><img src="../images/search.png"
											alt="" /></a>
									</form>
								</div>
							</div>
							<div class="slider_bar">
								<div class="slider_bar1">
									<!-- bar轮播 -->
									<div class="banner">
										<ul class="img">
											<li><a href="#"><img src="../images/lun1.jpg"
													alt="第1张图片"></a></li>
											<li><a href="#"><img src="../images/lun2.jpg"
													alt="第2张图片"></a></li>
											<li><a href="#"><img src="../images/lun3.jpg"
													alt="第3张图片"></a></li>
											<li><a href="#"><img src="../images/lun4.jpg"
													alt="第4张图片"></a></li>
											<li><a href="#"><img src="../images/lun5.jpg"
													alt="第5张图片"></a></li>
										</ul>
										<ul class="num"></ul>
									</div>
								</div>
							</div>
							<!-- end -->
						</div>
					</div>
				</div>
				<div class="rec_over">
					<div class="clearfix">
						<div class="rec">
							<div class="rec_head">
								<img src="../images/sign.png" alt="" /> <span>精品推荐</span>
							</div>
							<div class="rec_bg">
								<c:forEach items="${goodsList.rows}" varStatus="i" var="item">
									<div class="commodity">
										<input type="hidden" value="${item.gId}">
										<div class="commodity_rim">
											<a href="../front/showmore?id=${item.gId}" target="_blank"><img
												src="${item.gMainImage}" height="122" width="172" alt="" /></a>
										</div>
										<div class="commodity_name">
											<a href="../front/showmore?id=${item.gId}" target="_blank">${item.gTitle}</a>
										</div>
									</div>
								</c:forEach>

							</div>
							<div class="tcdPageCode"></div>
						</div>
					</div>
					<div class="penny">
						<div class="penny_head">
							<img id="yh" src="../images/sign.png" alt="" /> <span>优惠专区</span>
						</div>
						<div class="penny_box">
							<div class="penny_info">
								<div class="penny_rim">
									<div class="penny_img">
										<a href="" target="_blank"><img src="http://192.168.139.128/image/2017/03/20/1489990366446955.png"
											width="90" height="61" alt="" /></a>
									</div>
									<div class="penny_news">
										<div class="penny_pic">
											<img src="../images/Dota-2.png" width="17" height="17" alt="" />
										</div>
										<div class="penny_n">
											<a href="" target="_blank">无常君王披风</a>
										</div>
										<div class="penny_price">原价：1,650 元</div>
										<div class="penny_price2">
											售价： <span>1,600</span> 元
										</div>
									</div>
								</div>
							</div>
							<div class="penny_info">
								<div class="penny_rim">
									<div class="penny_img">
										<a href="" target="_blank"><img src="http://192.168.139.128/image/2017/03/30/1490873300163596.png"
											width="90" height="61" alt="" /></a>
									</div>
									<div class="penny_news">
										<div class="penny_pic">
											<img src="../images/Dota-2.png" width="17" height="17" alt="" />
										</div>
										<div class="penny_n">
											<a href="" target="_blank">无常君王披风</a>
										</div>
										<div class="penny_price">原价：1,650 元</div>
										<div class="penny_price2">
											售价： <span>1,600</span>元
										</div>
									</div>
								</div>
							</div>
							<div class="penny_info">
								<div class="penny_rim">
									<div class="penny_img">
										<a href="" target="_blank"><img src="http://192.168.139.128/image/2017/03/29/1490784044222900.png"
											width="90" height="61" alt="" /></a>
									</div>
									<div class="penny_news">
										<div class="penny_pic">
											<img src="../images/Dota-2.png" width="17" height="17" alt="" />
										</div>
										<div class="penny_n">
											<a href="" target="_blank">无常君王披风</a>
										</div>
										<div class="penny_price">原价：1,650 元</div>
										<div class="penny_price2">
											售价： <span>1,600</span> 元
										</div>
									</div>
								</div>
							</div>
							<div class="penny_info">
								<div class="penny_rim">
									<div class="penny_img">
										<a href="" target="_blank"><img src="http://192.168.139.128/image/2017/04/01/1491004226345180.png"
											width="90" height="61" alt="" /></a>
									</div>
									<div class="penny_news">
										<div class="penny_pic">
											<img src="../images/Dota-2.png" width="17" height="17" alt="" />
										</div>
										<div class="penny_n">
											<a href="" target="_blank">无常君王披风</a>
										</div>
										<div class="penny_price">原价：1,650 元</div>
										<div class="penny_price2">
											售价： <span>1,600</span> 元
										</div>
									</div>
								</div>
							</div>
							<div class="penny_info">
								<div class="penny_rim">
									<div class="penny_img">
										<a href="" target="_blank"><img src="http://192.168.139.128/image/2017/04/01/1491004593166332.png"
											width="90" height="61" alt="" /></a>
									</div>
									<div class="penny_news">
										<div class="penny_pic">
											<img src="../images/Dota-2.png" width="17" height="17" alt="" />
										</div>
										<div class="penny_n">
											<a href="" target="_blank">无常君王披风</a>
										</div>
										<div class="penny_price">原价：1,650 元</div>
										<div class="penny_price2">
											售价： <span>1,600</span> 元
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="new_commodity">
					<div class="new_head">
						<div class="new_zx">
							<span class="new_zx1"> <img src="../images/sign.png" alt="" />
								最新上架
							</span>
						</div>
					</div>
					<div class="new_commodity_bg">
						<c:forEach items="${newGoodsList.rows}" var="info">
							<div class="new_commodity_info">
								<div class="new_commodity_img">
									<a href="../front/showmore?id=${info.gId}" target="_blank"><img
										src="${info.gMainImage }" alt="" /></a>
								</div>
								<div class="new_commodity_name">
									<img src="../images/Dota-2.png" width="17" height="17" alt="" />
									<a href="../front/showmore?id=${info.gId}" target="_blank">${info.gTitle }</a>
								</div>
								<div class="new_commodity_price">
									出售价： <span>${info.gPrice /100}元</span>
								</div>
							</div>
						</c:forEach>
					</div>
				</div>
				<!-- <div class="guess">
					<div class="new_head">
						<div class="new_zx">
							<span class="new_zx1"> <img src="images/sign.png" alt="" />
								猜你喜欢
							</span>
						</div>
					</div>
					<div class="guess_commodity_bg">
						<div class="new_commodity_info">
							<div class="guess_commodity_img">
								<a href=""><img src="images/guess.png" alt="" height="101"
									width="150" /></a>
							</div>
							<div class="guess_commodity_name">
								<img src="" width="17" height="17" alt="" /><a href="">铭刻
									黯影臂</a>
							</div>
							<div class="guess_commodity_price">
								出售价:<span>225,000 元</span>
							</div>
						</div>
					</div>
				</div> -->
			</div>
		</div>
		<div class="footer">
			<div class="footer_container">
				<p>
					<a href="index.html">首页</a><b>|</b> <a href="#">关于我们</a><b>|</b> <a
						href="#">意见反馈</a><b>|</b> <a href="#">商务合作</a>
				</p>
			</div>
		</div>
		<div class="nav">
			<div class="shopper">
				<a href="shopping" target="_blank"> <span><img
						src="../images/shopper.png" alt="" /></span>
					<div class="shopper_gw" >购物车</div>
				</a>
				<div class="shopper_nums"></div>
				<!-- <a href="" id="shopper_bb_a">
					<p class="shopper_bb" >我的背包</p>
				</a> -->
				<div class="shopper_most">
					<a href="javascript: void (0)"> <img src="../images/top.png"
						alt="" />
					</a>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript"  src="../js/jquery-1.js"></script>
	<script type="text/javascript"  src="../js/modernizr.js"></script>
	<script type="text/javascript"  src="../js/classie.js"></script>
	<script type="text/javascript"  src="../js/uiMorphingButton_fixed.js"></script>
	<script type="text/javascript"  src="../js/login.js"></script>
	<script type="text/javascript"  src="../js/jquery.page.js"></script>
	<script type="text/javascript"  src="../js/loginregister.js"></script>
	<script>
		$(".suspension")
				.mouseover(
						function() {
							var thisNode = $(this);
							var tempNode = $(this).find(".suspension_class");
							if (tempNode.length == 0) {//没有生成分类子节点
								var html = "<div class='suspension_class' style='display: block;'><ul>";
								$
										.post(
												"../item/front/classList",
												{
													id : $(this).find(
															".classId").val()
												},
												function(data) {

													var keyList = eval(data);
													for (var i = 0; i < keyList.length; i++) {

														html += "<li style='text-align:center;'><a href='../front/search?search="
																+ keyList[i].text
																+ "'>"
																+ keyList[i].text
																+ "</a></li>";
													}
													html += "</ul></div>";
													thisNode.append(html);
												});

							}
							$(this).find(".suspension_hero").show().parent()
									.siblings().find(".suspension_hero").hide()
									.parent().siblings().find(
											".suspension_class").hide();
							$(this).find(".suspension_class").show().parent()
									.siblings().find(".suspension_class")
									.hide().parent().siblings().find(
											".suspension_hero").hide()
						});
		$(".suspension").mouseout(function() {
			$(".suspension_hero").hide();
			$(".suspension_class").hide()
		})

		$(function() {
			var pageCount = ${goodsList.total / 8};
			$(".tcdPageCode").createPage(
							{
								pageCount : Math.ceil(pageCount),
								current : 1,
								backFn : function(p) {
									$.post(
													"../goods/front/frontSelectBypage",
													{
														page : p,
														rows : 8
													},
													function(data) {
														$(".clearfix .rec_bg")
																.html("");
														for (var i = 0; i < data.length; i++) {
															var html = "<div class='commodity'>";
															html += '<input type="hidden" value="'+data[i].gId+'"><div class="commodity_rim">';
															html += '<a href="../front/showmore?id='
																	+ data[i].gId
																	+ '" target="_blank"><img src="'+data[i].gMainImage+'" height="122" width="172" alt="" /></a></div><div class="commodity_name">';
															html += '<a href="../front/showmore?id='
																	+ data[i].gId
																	+ '" target="_blank">'
																	+ data[i].gTitle
																	+ '</a></div></div>';
															$(
																	".clearfix .rec_bg").append(html);
														}
													});
								}
							});
			var i = 0;
			var timer = null;
			for (var j = 0; j < $('.img li').length; j++) { //创建圆点
				$('.num').append('<li></li>')
			}
			$('.num li').first().addClass('active'); //给第一个圆点添加样式

			var firstimg = $('.img li').first().clone(); //复制第一张图片
			$('.img').append(firstimg).width(
					$('.img li').length * ($('.img img').width())); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度

			//设置按钮的显示和隐藏
			$('.banner').hover(function() {
				$('.btn').show();
			}, function() {
				$('.btn').hide();
			})

			//鼠标划入圆点
			$('.num li').mouseover(
					function() {
						var _index = $(this).index();
						$('.img').stop().animate({
							left : -_index * 849
						}, 2000);
						$('.num li').eq(_index).addClass('active').siblings()
								.removeClass('active');
					})

			//定时器自动播放
			timer = setInterval(function() {
				i++;
				if (i == $('.img li').length) {
					i = 1;
					$('.img').css({
						left : 0
					});
				}
				;

				$('.img').stop().animate({
					left : -i * 849
				}, 2000);
				if (i == $('.img li').length - 1) {
					$('.num li').eq(0).addClass('active').siblings()
							.removeClass('active');
				} else {
					$('.num li').eq(i).addClass('active').siblings()
							.removeClass('active');
				}
			}, 2000)

			//鼠标移入，暂停自动播放，移出，开始自动播放
			$('.banner').hover(
					function() {
						clearInterval(timer);
					},
					function() {
						timer = setInterval(function() {
							i++;
							if (i == $('.img li').length) {
								i = 1;
								$('.img').css({
									left : 0
								});
							}
							;

							$('.img').stop().animate({
								left : -i * 849
							}, 2000);
							if (i == $('.img li').length - 1) {
								$('.num li').eq(0).addClass('active')
										.siblings().removeClass('active');
							} else {
								$('.num li').eq(i).addClass('active')
										.siblings().removeClass('active');
							}
						}, 2000)
					})

		});
		function submitSearch() {
			$("#searchForm").submit();
		}
		function show(id){
			var str='"#'+id+'"';
			$(this).css('display', 'block');
		}
	
	</script>
</body>
</html>